<template>
<highlightjs language="JavaScript" highlightAuto top :code="code" />
</template>
<script>
export default {
  setup () {
    const code = `
    const state = reactive({
      map: ref(null),
      mapBox: ref(null),
      scaleLineControl: new control.ScaleLine(),
      scaleplate: '度',
      scaleplateList: [
        {
          t: '度',
          v: 'degrees'
        },
        {
          t: '英制英尺',
          v: 'imperial'
        },
        {
          t: '美制英尺',
          v: 'us'
        },
        {
          t: '海里',
          v: 'nautical'
        },
        {
          t: '公制',
          v: 'metric'
        }
      ]
    })

    watch(() => state.scaleplate, () => {
      setScaleLine()
    })

    const init = () => {
      state.map = new Map({
        target: state.mapBox,
        // 添加控件
        controls: control.defaults().extend([
          state.scaleLineControl // 比例尺
        ]),
        layers: [
          new Tile({
            source: new BingMaps({
              key: 'AiZrfxUNMRpOOlCpcMkBPxMUSKOEzqGeJTcVKUrXBsUdQDXutUBFN3-GnMNSlso-',
              imagerySet: 'Aerial'
            })
          })
        ],
        view: new View({
          // 地图视图
          projection: 'EPSG:4326', // 坐标系，有EPSG:4326和EPSG:3857
          center: [116.41400, 39.91500], // 北京坐标
          zoom: 7 // 地图缩放级别（打开页面时默认级别）
        })
      })
      setScaleLine()
    }

    const setScaleLine = () => { // 设置比例尺单位
      // 从列表里找到当前单位
      const unit = state.scaleplateList.find(item => {
        return item.t === state.scaleplate
      })
      // 设置单位，注意unit.v的值，必须使用这些值
      state.scaleLineControl.setUnits(unit.v)
    }
    `
    return {
      code
    }
  }
}
</script>
